<template>
  <div id="completeInformation">
    <Top :title="title" iconShow="1"></Top>
    <section class="info">
        <ul class="info-list">
            <li class="info-list-item">
              <div>
                <span class="input-label" slot="label">昵称</span>
                <input v-model="info.nickName" @blur.native.capture="nickNameBlur(info.nickName)" type="text" maxlength="11" label-width="2.5rem" placeholder="请输入昵称">   
                <i class="mintui mintui-field-error" style="color:#b2b2b2;" v-show="info.nickName" @click="clearNickName()"></i>
              </div>
            </li>
            <li class="info-list-item">
              <div>
                <span class="input-label" slot="label">真实姓名</span>
                <input v-model="info.realName" @blur.native.capture="realNameBlur(info.realName)" type="text" maxlength="8" :disabled="isChangeRealname" text-align="left" label-width="2.5rem" placeholder="请输入真实姓名">  
                <i class="mintui mintui-field-error" style="color:#b2b2b2;" v-show="(!isChangeRealname)&&info.realName" @click="cleaRrealName()"></i>
              </div>
            </li>
            <li class="info-list-item">
              <div>
                <span class="input-label" slot="label">身份证号</span>
                <input v-model="info.IDCard" type="text" :disabled="isChangeIdcard" maxlength="18" text-align="left" label-width="2.5rem" placeholder="请输入身份证号"> 
                <i class="mintui mintui-field-error" style="color:#b2b2b2;" v-show="(!isChangeIdcard) &&info.IDCard" @click="clearIDCard()"></i>
              </div>  
            </li>
        </ul>
    </section>
    <div class="submit-btn" @click="submitInfo">完成</div>
  </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import bus from '../../../js/lib/bus.js'
import util from '../../../js/lib/util.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import { Indicator, MessageBox,Field } from "mint-ui";
export default {
  name: 'Applyrecord',
  components: { Top },
  data() {
    return {
      title: "身份认证",
      username: "",
      isChangeRealname:false,
      isChangeIdcard:false,
      info: {
        nickName: "",
        realName: "",
        IDCard: ""
      },
      isType:{
        valid:false
      }
    }
  },
  mounted(){
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    let prePath = commons.getParameter('prePath');
    if (prePath == "/main/mine") {
      var token = commons.getCookie("token");
      // 调用用户信息接口，获取手机号码
      this.$http
        .post("/loansupermarket-app/user/queryUser", { token: token })
        .then((response) => {
          var resBody = response.body;
          if (resBody.code == "000") {
            let info = {
              nickName: resBody.data.nickName || "",
              realName: resBody.data.name || "",
              IDCard: resBody.data.idCard || ""
            };
            if(resBody.data.name){
              this.isChangeRealname = true;
            }
            if(resBody.data.idCard){
              this.isChangeIdcard = true;
            }
            this.info = info;
          }else
          if(resBody.code == "444"){
            // this.$router.push({ path: '/login',query:{history:1} });
            window.location.href='../user/login.html?history=1';
          }
        });
    }
  },
  methods: {
    nickNameBlur(val){
     let reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
      if(val.match(reg)) {
          val = val.replace(reg, '');
      }
      this.info.nickName = val;
    },
    realNameBlur(val){
     let reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
      if(val.match(reg)) {
          val = val.replace(reg, '');
      }
      this.info.realName = val;
    },
    clearNickName(){this.info.nickName='';},
    cleaRrealName(){this.info.realName='';},
    clearIDCard(){this.info.IDCard='';},
    submitInfo() {
      let vm = this,
        prePath = commons.getParameter('prePath');
      let postData = {
        nickName: this.info.nickName,
        name: this.info.realName,
        idCard: this.info.IDCard
      };
      //提交身份验证接口
      if (!postData.nickName) {
        MessageBox({ message: "请输入昵称" });
        return;
      }
      if (!postData.name) {
        MessageBox({ message: "请输入真实姓名" });
        return;
      }
      if (!postData.idCard) {
        MessageBox({ message: "请输入身份证号" });
        return;
      }
      if (!util.IdentityCodeValid(postData.idCard)) {
        MessageBox({ message: "请输入有效的身份证号" });
        return;
      }
      Indicator.open("加载中...");
      this.$http
        .post("/loansupermarket-app/user/idenAuttt", postData)
        .then(res => {
            Indicator.close();
          let resBody = res.body;
          if (resBody.code == "000") {
              window.sessionStorage.setItem('nickname',resBody.data.nickName);
              window.sessionStorage.setItem('realName',resBody.data.name);
              window.sessionStorage.setItem('headImg',resBody.data.head_Img_Url || '../static/img/logo.png');
              window.sessionStorage.setItem('idcardCode',resBody.data.idCard);
            // this.$router.push({
            //   path: prePath,
            //   query: { isIdCard: true }
            // });
            let perPath = util.getQueryString('perPath');
            if(perPath == 'mine'){
              location.href='./mine.html';
            }else 
            if(perPath == 'completeInfo'){
              location.href='../user/completeInfo.html?isIdCard=true';
            }else{
              history.go(-1);
            }
          } else {
            MessageBox.alert(resBody.mesg, "提示");
          }
        }).catch((err)=>{
            Indicator.close();
            console.log(err);
        });
    }
    
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.info-list .info-list-item>div{
  padding:10px;
  position:relative;
  display:flex;
  align-items: center;
}
.info-list .info-list-item>div>input{
  width: 100%;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  background-color: transparent;
  font-size: inherit;
  color: inherit;
  height: .7rem;
  line-height: .7rem;
}
.input-label {
  width: 2.5rem;
  display: inline-block;
  text-align: left;
}
.mint-cell-title {
  text-align: center;
}
.submit-btn {
  margin: 1rem auto;
  width: 90%;
  // @include textAlign(1.2rem);
  text-align: center;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.45rem;
  color: #ffffff;
  border-radius: 5px;
  background: -webkit-linear-gradient(left, #2ce9e8, #7dd7ff) !important;
}
.info {
  margin-top: 1.4rem;
  font-size: 0.4rem;
  background-color: #ffffff;
  padding: 0 0.3rem;
  &-list {
    &-item {
      padding: 0.1rem 0;
      border-bottom: 1px solid #e4e4e4;
      &:last-child {
        border: none;
      }
    }
  }
}

</style>
